<template>
  <div class="card-nopd-out-container">
    <a-row class="video-beat-container">
      <a-col :span="3" class="tree-box">
        <side-tree @toggleVideo="toggleVideo" />
      </a-col>
      <a-col :span="18" >
        <a-radio-group v-model:value="videoType" @change="onTypeChange">
          <a-radio-button value="one">{{ $t('video.singleScreen') }}</a-radio-button>
          <a-radio-button value="four">{{ $t('video.fourScreen') }}</a-radio-button>
        </a-radio-group>
        <!--<div class="view-video-one-container view-video-one-container-bg-img" v-if="videoType == 'one'"  >-->
        <div :class="['view-video-one-container',{'view-video-one-container-bg-img': !selectInfo.accessToken}]" v-if="videoType == 'one'"  >
          <span class="line-station-info">{{selectInfo.lineStationNo}}</span>
          <iframe v-if="selectInfo.accessToken" scrolling="no" :src="`https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/${selectInfo.deviceSerial}/${selectInfo.channelNo}.hd.live&accessToken=${selectInfo.accessToken}&audio=1&autoplay=1`" id="ysOpenDevice" allowfullscreen></iframe>
        </div>
        <div class="view-video-four-container"  v-if="videoType == 'four'">
          <div v-for="(item, index) in selectInfoAry" :key="index">  
            <span class="line-station-info">{{item.lineStationNo}}</span>
            <iframe scrolling="no" :src="`https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/${item.deviceSerial}/${item.channelNo}.hd.live&accessToken=${item.accessToken}&audio=1&autoplay=1`"  id="ysOpenDevice" allowfullscreen></iframe>
          </div>
        </div>
      </a-col>
      <a-col :span="3" class="card-box">
        <SideCard ref="sideCardRef" :videoType="videoType" @onSelect="onCardSelect"/>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import SideTree from './modules/sideTree.vue'
import SideCard  from './modules/sideCard'
export default {
  name: 'videoCenter',
  components: {
    SideTree,
    SideCard
  },
  data() {
    return {
      videoType: 'one',
      selectInfo: {},
      selectInfoAry: []
    }
  },
  methods: {
    toggleVideo() {
      this.$refs.sideCardRef.searchQuery = ''
      this.$refs.sideCardRef.loadData(true)
    },
    onTypeChange() {
      this.$nextTick(()=> { 
        this.$refs.sideCardRef.loadData(true)
      })
    },
    onCardSelect(val) {
      // 当前选中的card值 
      if(this.videoType == 'one') {
        this.selectInfo = val
      } else if(this.videoType == 'four') {
        this.selectInfoAry = val?.length ? val : []
        console.log('selectInfoAry',this.selectInfoAry); 
      }
    }
  }
}
</script>
